<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.6.2/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/4.6.2/js/bootstrap.bundle.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/4.6.2/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.net/axios/1.6.5/axios.min.js" ></script>
    <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>

</head>
<body>
<div class="container" id="app">
    <a href="/">alpine版</a> | <a href="/vue">vue版</a>  | <a href="/petite-vue">petite-vue版 | <a href="/alpine-demo.html">alpine-demo</a> | <a href="/petite-vue-demo.html">petite-vue-demo</a>
    <h2>Vue TodoList</h2>
    <button class="btn btn-primary float-right" @click="addTodo()">Add</button>
    <table id="todoTable" class="table">
        <thead>
        <tr>
            <th>Index</th>
            <th>Content</th>
            <th>Operations</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(todo,index) in todos">
            <td>{{index+1}}</td>
            <td>{{todo.content}}</td>
            <td>
                <button  class="btn btn-xs btn-success"
                         @click="editTodo(todo)">Edit</button>
                <button class="btn  btn-xs btn-danger"
                        @click="removeTodo(todo)">Delete</button>
            </td>
        </tr>
        </tbody>
    </table>

    <!-- 模态框 -->
    <div v-if="show_modal">
        <div class="modal" style="display: block">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">Add/Edit Todo</h4>
                        <button type="button" class="close" @click="show_modal=false">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="form-body">
                            <div class="form-group">
                                <input name="content" placeholder="please input todo" class="form-control" type="text"
                                       v-model="content">
                            </div>
                        </div>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" id="btnSave" class="btn btn-primary" @click="saveTodo()">Save</button>
                        <button type="button" class="btn btn-secondary" @click="show_modal=false">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            todos: [],
            content: '',
            show_modal:false,
            cur_todo_id: ''
        },
        created: function () {
            this.fetch()
        },

        // methods that implement data logic.
        // note there's no DOM manipulation here at all.
        methods: {
            fetch:function(){
                let self = this;
                axios.get('/todo/')
                    .then(function (res) {
                            self.todos = res.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            addTodo: function (){
                let self = this;
                self.show_modal = true
                self.content = ''
                self.cur_todo_id = ''
            },

            editTodo: function (todo) {
                let self = this;
                self.show_modal = true
                self.content = todo.content;
                self.cur_todo_id = todo.id;
            },
            saveTodo: function () {
                let self = this;
                if (!self.cur_todo_id) {
                    axios.post('/todo/', {
                        content: self.content,
                    })
                        .then(function (res) {
                            console.log(res);
                            self.fetch();
                            self.show_modal = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }else{
                    axios.put('/todo/'+self.cur_todo_id, {
                        content: self.content,
                    })
                        .then(function (res) {
                            console.log(res);
                            self.fetch();
                            self.show_modal = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })

                }
            },

            removeTodo: function (todo) {
                var self = this;
                axios.delete('/todo/'+todo.id)
                    .then(function (res) {
                        console.log(res);
                        self.fetch();
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

            },
        },

    })
</script>

</body>
</html>